<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可视化区域</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        margin-top: 1000px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
  <script>
const div=document.querySelector('div')
    // 定义相交监视器
var observer = new IntersectionObserver(changes => {
  for (const change of changes) {
    console.log(change.time);               // 发生变化的时间
    console.log(change.rootBounds);         // 根元素的矩形区域的信息
    console.log(change.boundingClientRect); // 目标元素的矩形区域的信息
    console.log(change.intersectionRect);   // 目标元素与视口（或根元素）的交叉区域的信息
    console.log(change.intersectionRatio);  // 目标元素与视口（或根元素）的相交比例
    console.log(change.isIntersecting);  // 目标元素与视口（或根元素）的相交比例
    console.log(change.target);             // 被观察的目标元素
  }
}, {});

// 开始观察某个目标元素
observer.observe(div);

// // 停止观察某个目标元素
// observer.unobserve(target);

// // 关闭监视器
// observer.disconnect();

setTimeout(function(){
    console.log('timeout1')
})
new Promise(function(reolve){
    console.log('promise1');
    for(var i=0;i<3;i++){
        console.log(i);
        reolve()
    }
    console.log('promise2');
    
}).then(function(){
    console.log('then1');
})
console.log("global1");
  </script>
</html>
